<template>
  <el-card>
    <div>
      <div class="search">
        计划类型:
        <el-select
          v-model="in_planType"
          placeholder="请选择计划类型"
          size="mini"
        >
          <el-option
            v-for="item in plantypelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        物料编号：<el-input
          v-model="in_materialNumber"
          placeholder="请输入物料编号"
          size="small"
          clearable
        ></el-input>

        物料名称：<el-input
          v-model="in_materialName"
          placeholder="请输入物料名称"
          size="small"
          clearable
        ></el-input>

        <el-button
          class="detail"
          icon="el-icon-search"
          @click="check"
          size="small"
          >查询</el-button
        >
        <el-button
          class="rePassword"
          icon="el-icon-refresh-right"
          size="small"
          @click="reset"
          >重置</el-button
        >
      </div>
      <div class="box">
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe
          :row-style="{ height: '60px', padding: '0 0' }"
        >
          <el-table-column prop="planTypeId" label="计划类型" width="150">
          </el-table-column>
          <el-table-column prop="materialNumber" label="物料编号" width="120">
          </el-table-column>
          <el-table-column prop="materialName" label="物料名称" width="120">
          </el-table-column>
          <el-table-column label="一月">
            <el-table-column prop="months[0].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[0].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[0].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="二月">
            <el-table-column prop="months[1].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[1].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[1].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="三月">
            <el-table-column prop="months[2].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[2].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[2].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="四月">
            <el-table-column prop="months[3].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[3].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[3].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="五月">
            <el-table-column prop="months[4].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[4].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[4].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="六月">
            <el-table-column prop="months[5].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[5].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[5].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="七月">
            <el-table-column prop="months[6].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[6].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[6].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="八月">
            <el-table-column prop="months[7].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[7].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[7].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="九月">
            <el-table-column prop="months[8].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[8].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[8].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="十月">
            <el-table-column prop="months[9].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[9].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[9].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="十一月">
            <el-table-column prop="months[10].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[10].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[10].remain" label="剩余">
            </el-table-column>
          </el-table-column>
          <el-table-column label="十二月">
            <el-table-column prop="months[11].in" label="入库">
            </el-table-column>
            <el-table-column prop="months[11].out" label="出库">
            </el-table-column
            ><el-table-column prop="months[11].remain" label="剩余">
            </el-table-column>
          </el-table-column>
        </el-table>

        <!-- show-overflow-tooltip--自适应长度 -->
        <!-- 分页功能 -->

        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          hide-on-single-page
        >
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "入库",
        },
        {
          value: "选项2",
          label: "出库",
        },
      ],
      plantypelist: [
        {
          value: "1",
          label: "新品",
        },
        {
          value: "2",
          label: "临措",
        },
        {
          value: "3",
          label: "抢修",
        },
        {
          value: "4",
          label: "配变电",
        },
        {
          value: "5",
          label: "线路",
        },
      ],
      value: "",
      value2: "",
      total: 0,
      pageSize: 10,
      page: 1,
      data: [],
      in_planType: "",
      in_materialNumber: "",
      in_materialName: "",
      in_planYear: "",
    };
  },
  methods: {
    pageChange(e) {
      this.page = e;
    },

    sizeChange(e) {
      this.pageSize = e;
    },

    // 查询
    check() {
      this.axios({
        url: "/financial/getAllYearAccount",
        method: "post",
        data: qs.stringify({
          materialName: this.in_materialName,
          materialNumber: this.in_materialNumber,
          planTypeId: this.in_planType,
          year: this.in_planYear,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).then((res) => {
        console.log(res);
        this.data = res.data.data.yearAccount;
        this.total = res.data.data.yearAccount.length;
        for (let i = 0; i < res.data.data.yearAccount.length; i++) {
          if (this.data[i].planTypeId == 1) {
            this.data[i].planTypeId = "新品";
          } else if (this.data[i].planTypeId == 2) {
            this.data[i].planTypeId = "临措";
          } else if (this.data[i].planTypeId == 3) {
            this.data[i].planTypeId = "抢修";
          } else if (this.data[i].planTypeId == 4) {
            this.data[i].planTypeId = "配变电";
          } else {
            this.data[i].planTypeId = "线路";
          }
        }
      });
    },

    // 重置
    reset() {
      (this.in_materialName = ""),
        (this.in_planYear = ""),
        (this.in_planType = ""),
        (this.in_materialNumber = "");
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },

  mounted() {
    this.axios({
      url: "/financial/getAllYearAccount",
      method: "post",
    }).then((res) => {
      console.log(res);
      this.data = res.data.data.yearAccount;
      this.total = res.data.data.yearAccount.length;
      console.log(this.data);
      for (let i = 0; i < res.data.data.yearAccount.length; i++) {
        if (this.data[i].planTypeId == 1) {
          this.data[i].planTypeId = "新品";
        } else if (this.data[i].planTypeId == 2) {
          this.data[i].planTypeId = "临措";
        } else if (this.data[i].planTypeId == 3) {
          this.data[i].planTypeId = "抢修";
        } else if (this.data[i].planTypeId == 4) {
          this.data[i].planTypeId = "配变电";
        } else {
          this.data[i].planTypeId = "线路";
        }
      }
      // console.log(this.data);
    });
  },

  computed: {
    tableData: function () {
      return this.data.slice(
        (this.page - 1) * this.pageSize,
        this.pageSize * this.page
      );
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.search {
  border-top: 2px solid #9999;
  padding-top: 30px;
  margin-top: 15px;
}
.box {
  padding-top: 30px;
}
.el-pagination {
  margin-top: 25px;
  float: right;
}
.el-table .cell {
  text-align: center;
}
.el-table /deep/ td .cell,
.el-table /deep/ th .cell {
  text-align: center;
}

.el-button {
  margin-left: 10px;
}
</style>
